<template>
    <div>
        <div>
            <h2>{{ title }}</h2>
            <span class="msg">{{ msg }}</span>
        </div>
        <div v-if="type == true">
            <input id="username" v-model="username" class="input">
            <br>
            <input id="userpassword" type="password" v-model="userpassword" class="input">
            <br>
            <!-- 使用了elment ui 的按钮属性 -->
            <el-button type="info" round id="login" @click="login()">登录</el-button>

            <button @click="registerPage()" class="button button-cancel">注册</button>
        </div>
        <div v-else>
            <input id="username" v-model="username" class="input">
            <br>
            <input id="userpassword" type="password" v-model="userpassword" class="input">
            <br>
            <button id="register" @click="register()" class="button">注册</button>

            <button id="register" @click="loginPage()" class="button button-cancel">登录</button>

        </div>

    </div>
</template>

<script>
import axios from 'axios'
import request from '@/js/utils/request'
import { Notification } from 'element-ui';
import { Message } from 'element-ui'

//在一个模块中，export default只允许向外暴露一次
export default {
    name: 'login',
    data() {
        return {
            type: true,
            title: 'qy-Login',
            msg: '请登录',
            username: '',
            userpassword: ''
        }
    },
    created: function () {
        //显示banner
        this.$parent.bannerChange();
    },
    methods: {
        //注册页面
        registerPage() {
            this.type = false;
            this.title = 'qy-Register';
            this.msg = '请注册';
        },
        //登录页面
        loginPage() {
            this.type = true;
            this.title = 'qy-Login';
            this.msg = '请登录';
        },
        //注册用户
        register() {
            if (this.username == '') {
                //alert('用户名为空');
                this.msg = '用户名为空';
                return;
            }
            if (this.userpassword == '') {
                this.msg = '用户密码为空';
                // alert('用户密码为空');
                return;
            }
            // http://localhost
            request.post('/qy/register', {
                username: this.username,
                password: this.userpassword
            }).then(response => {
                console.log(response.data);
                if (response.data.code == 0) {
                    this.type = true;
                    // alert("注册结果：" + response.data.message);
                    this.msg = '注册结果:' + response.data.message + ',请登录';

                } else {
                    // alert("注册结果：" + response.data.message);
                    this.msg = '注册结果:' + response.data.message;
                }
            });
            // .catch(function (error) {
            //     console.log(error);
            //     alert("系统异常! "+error)
            // });
        },
        //登录用户
        login() {
            // 由于this的指向有问题，我们只需要重新声明一下this就可以重新调用了
            const thisPage = this
            if (this.username == '') {
                this.msg = '用户名为空';
                // alert('用户名为空');
                return;
            }
            if (this.userpassword == '') {
                this.msg = '用户密码为空';
                // alert('用户密码为空');
                return;
            }
            // http://localhost
            request.post('/qy/login', {
                username: this.username,
                password: this.userpassword
            }).then(function (response) {
                console.log(response.data);
                if (response.data.code == 0) {
                    // alert("登录状态："+response.data.message)
                    //弹窗提示
                    thisPage.$message({
                        message: response.data.message,
                        type: 'success'
                    });
                    thisPage.$parent.showBanner = false;
                    // thisPage.$router.push('/index'); //一般的写法
                    //传递参数的写法,主要在index.js中也要做响应的配置
                    //thisPage.$router.push({name:'/index',params:response.data.data});
                    // 使用params时不能使用path,路径前面要加name（index.js）的值

                    thisPage.$router.push({ path: '/index', query: response.data.data });
                } else {
                    // alert("登录状态："+response.data.data)
                    thisPage.msg = "登录状态：" + response.data.message
                }
            })
                .catch(function (error) {
                    console.log(error);
                    alert("系统异常! " + error)
                });

        }
    }

}
</script>

<style  scoped>
@import '../../css/login.css';
</style>